<template>
  <MainContent title="员工列表">
    <template #search-bar>
      <SearchBar inline>
        <template #normal>
          <!-- <el-form-item label="所属机构">
            <el-input
              v-model="tableForm.name"
              clearable
              placeholder="请选择所属机构"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="员工名称">
            <el-input v-model="tableForm.username" clearable placeholder="请输入员工名称"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="tableForm.status" class="m-2" placeholder="请选择状态">
              <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSearch">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showExport = true">积分导入</el-button>
            <el-button type="primary" @click="synchronous">同步数据</el-button>
            <el-button type="primary" @click="showExportSigIn = true">导出</el-button>

          </el-form-item>
        </template>
        <!-- <template #toolbar>
          <el-form-item>
            <el-button type="primary" @click="showDialog = true">新建模型</el-button>
          </el-form-item>
        </template> -->
      </SearchBar>
    </template>
    <!--    <template #actions-bar>-->
    <!--      <el-button type="primary" @click="showDialog = true">新建模型</el-button>-->
    <!--    </template>-->
    <LayoutTable ref="integralModel" url="/community/back/userExt/pageUser" :setSearch="setSearch" disable-auto-height
      :param="tableForm">
      <el-table-column prop="username" label="员工姓名" min-width="120"></el-table-column>

      <el-table-column prop="depart" label="所属机构" min-width="200"></el-table-column>

      <el-table-column prop="position" label="当前职务" min-width="100"></el-table-column>
      <el-table-column prop="accumulate" label="累计积分" min-width="100"></el-table-column>
      <el-table-column prop="available" label="剩余积分" min-width="100"></el-table-column>
      <el-table-column prop="medal" label="员工勋章" min-width="200"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          <el-switch :value="scope.row.status" :active-value="1" :inactive-value="2" @click="setStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="更新时间" min-width="180">
        <template #default="scope">
          {{ dateFormat(scope.row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300">
        <template #default="scope">
          <div v-if="scope.row.type == 0">
            <el-button @click="$router.push(`/marketing/managerHome/integralManag/integralDetail/${scope.row.userId}`)"
              link type="primary">积分明细</el-button>
            <el-button @click="openAwarded(scope.row)" link type="primary">颁发勋章</el-button>
            <el-button @click="setUpdateChief(scope.row)" link type="primary">{{ `${scope.row.top == 0 ? '设为' :
              '取消'}首席` }}</el-button>
          </div>
        </template>
      </el-table-column>
    </LayoutTable>
  </MainContent>
  <Medal-Awarded :showDialog="showDialog" :userId="userId" @confirm="confirm" @cancel="cancel"></Medal-Awarded>
  <Export-Intergal :showExport="showExport" @confirmExport="confirmExport" @cancelExport="cancelExport"></Export-Intergal>
  <Export-SigIn :showExportSigIn="showExportSigIn" @cancelExportSigIn="cancelExportSigIn"></Export-SigIn>
</template>
<script lang="ts">
export default {
  name: 'IntegralManag'
}
</script>
<script lang="ts" setup>
import integralApi from "@/api/integralApi.js";
import MedalAwarded from './component/MedalAwarded.vue'
import ExportIntergal from "./component/ExportIntergal.vue";
import ExportSigIn from "./component/ExportSigIn.vue";
// import MedalAwarded from "./component/medalAwarded"
import { dateFormat } from "@/utils/filters";
const tableForm = ref({
  username: "",
  status: null,
});
const userId = ref('')
const statusList = ref([
  { id: null, name: "全部" },
  { id: 1, name: "启用" },
  { id: 0, name: "停用" },
]);
const showDialog = ref(false);
const showExport = ref(false)
const showExportSigIn = ref(false)
const modelId = ref(Number(null));
const setSearch = ref(Number());

const synchronous = () => {
  ElMessageBox.confirm("数据一旦同步将不可回退，请谨慎操作！！！", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // customerUpdateStatus();
      setSynchronous()
      console.log('[ 1111 ]', 1111)
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消同步",
      });
    });
};

const setSynchronous = async () => {
  let rs = await integralApi.setSynchronous()
  if (rs.code === 200) {
    ElMessage({
      type: "success",
      message: "同步成功",
    });
  }
}



const setStatus = (row: any) => {
  ElMessageBox.confirm("是否修改状态?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      customerUpdateStatus(row);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
};
const integralModel = ref();
const setUpdateChief = (row: { id: any; }) => {
  ElMessageBox.confirm("是否提交修改?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      updateChief(row);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消操作",
      });
    });
}
const updateChief = async (row: { id: any; }) => {
  let rs = await integralApi.updateChief({ id: row.id });
  if (rs.code === 200) {
    onSearch()
    ElMessage({
      type: "success",
      message: `已${row.top == 0 ? '设为' : '取消'}首席`,
    });
  }
}

const customerUpdateStatus = async (row: any) => {
  let rs = await integralApi.customerUpdateStatus({ id: row.id, name: row.name });
  if (rs.code === 200) {
    onSearch()
    ElMessage.success('状态修改成功')
  }
}
const openAwarded = (row: any) => {
  showDialog.value = true
  userId.value = row.userId
}

const confirm = () => {
  onSearch();
  cancel()
};
const confirmExport = () => {
  cancelExport()
}
const cancel = () => {
  showDialog.value = false;
  setTimeout(() => {
    modelId.value = Number(null);
  }, 500);
};
const cancelExport = () => {
  showExport.value = false
}
const cancelExportSigIn = () => {
  showExportSigIn.value = false
}
const onSearch = () => {
  setSearch.value++;
};

const store = useStore();
// 监听机构
const insId = computed(() => {
  return store.state.insId.insId;
});
watch(
  () => insId,
  () => {
    onSearch();
  },
  {
    deep: true
  }
)
</script>

<style lang="scss" scoped></style>
